<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="referrer" content="no-referrer" />
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="referrer" content="no-referrer" />
    <title>源辰租房</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/nprogress.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="apple-touch-icon-precomposed" href="images/icon/icon.png">
    <link rel="shortcut icon" href="images/icon/favicon.ico">
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/nprogress.js"></script>
    <script src="js/jquery.lazyload.min.js"></script>

    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="js/login.js"></script>
    <script src="js/tenant.js"></script>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            html{height:100%}
            body{height:100%;margin:0px;padding:0px}
            #container{height:100%}
        </style>
    </head>
    <style>
        .el-carousel__item img {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 400px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
        .house-info-zufang{
            display: flex;
            list-style: none;
        }
        .house-info-zufang li{
            flex: 5;
        }
        .price{
            color: #ff7800;
            margin-top: 9px;
        }
        .strongbox{
            font-family:'fangchan-secret','Hiragino Sans GB','Microsoft yahei',Arial,sans-serif,'宋体'!important
        }
        .widget-tabs2 {
            height: 300px;
        }
        .myImg{
            border-radius: 4px;
            display: block;
            height: 140px;
            margin: 0 auto;
            width: 140px;
        }
        .myImg2{
            padding: 20px;
        }
        .type{
            color: #a9a9a9;
            font-size: 14px;
        }
        .rec_common{
            display: block;
            float: top;
            font-size: 12px;
            line-height: 12px;
            margin-left: 20px;
            position: relative;
            width: 230px;
            padding: 20px;
        }
        .rec_common_img{
            float: left;
            border: none;
            display: block;
            height: 180px;
            margin-bottom: 5px;
            overflow: hidden;
            width: 180px;
            border: none;
            vertical-align: top;
            overflow-clip-margin: content-box;
        }
        .aside{
            border: 1px solid #e6e6e6;
            margin-top: 22px;
            padding: 0 25px;
        }
        .rec_common_title{
            color: #333;
            display: block;
            font-size: 18px;
            height: 24px;
            line-height: 24px;
            margin-top: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 210px;
        }
        .rec_common_price{
            color: #e54b00;
            float: left;
            font-size: 14px;
            height: 22px;
            line-height: 22px;
        }
        .rec_common_info{
            color: #737373;
            float: right;
            line-height: 22px;
        }
        .widget_hot li a,.widget_hot .thumbnail,.widget_hot .thumbnail{
            margin: 0px;
            padding: 0px;
        }
        .widget_hot .thumbnail img {
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
        }
        .detail-info {
            font-weight: 400;
            padding: 8px 10px;
        }
        .detail-info .house-title {
            color: #333;
            margin-top: 180px
        }
        .detail-info .house-type {
            color: #888;
        }
        .detail-info .price {
            color: #ff552e;
            font-size: 14px;
        }
        .el-icon-loading{
            font-size: 2em;
            display: block;
            text-align: -webkit-center;
        }
    </style>
</head>
<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=1.0&type=webgl&ak=frPkNeMi90BzZyZRgRy3nNYYuLdCiSTC
"></script>
<body class="user-select">
<div id="app">
    <mymain @logined="onlogin">
        <div class="content-wrap">
            <div class="content">
                <h2 style="display: inline"><div class="strongbox" style="font-weight: normal; display: inline">{{house.price}}租{{house.address}} {{house.scale}}</div></h2>
                <div style="float: right; margin-top: 5px; font-size: 20px;">
                    <span v-if="isCollect"><a @click="removeCollect"><i class="el-icon-star-on" style="font-size: 25px"></i>取消收藏</a></span>
                    <span  v-else><a @click="addCollect"><i class="el-icon-star-off" style="font-size: 25px"></i>加入收藏</a></span>
                    <span v-show="state==1" style="cursor: pointer; margin-left: 20px; color: red" @click="dialogVisible=true">
                        <i class="el-icon-warning" style="font-size: 25px"></i>举报</span>
                </div>
                <div class="title-basic-info clearfix">
                    <span class="price"><em><b class="strongbox" style="font-weight: normal;font-size: large">{{house.price}}</b></em>元/月</span>
                    <span class="info-tag">
            <em><b class="strongbox" style="font-weight: normal;font-size: large">{{house.scale}}</b></em>
        </span>
                    <span><em><b class="strongbox" style="font-weight: normal;font-size: large">{{house.type}}</b></em></span>
                </div>
                <template>
                    <el-carousel :interval="4000" type="card" height="450px">
                        <el-carousel-item v-for="item in house.imgUrls" :key="item">
                            <img class="medium" :src="''+item" width="100%" height="100%" style="object-fit: cover">
                        </el-carousel-item>
                    </el-carousel>
                </template>
                <div style="text-align: right" class="type"><b class="strongbox" style="font-weight: normal">房屋编号: {{house.id}}</b></div><br/><br/>
                <h3><div class="strongbox" style="font-weight: normal;" >房屋信息</div></h3><br/>
                <span class="price"><em><b class="strongbox" style="font-weight: normal;font-size: large">{{house.price}}</b></em>元/月</span><br/><br/>
                <ul class="house-info-zufang" style="padding: 10px" >
                    <li class="house-info-item" >
                        <span class="type">户型：</span>
                        <span><em><b class="strongbox" style="font-weight: normal;">{{house.scale}}</b></em></span>
                    </li>
                    <li class="house-info-item">
                        <span class="type">朝向：</span>
                        <span class="info">南北</span>
                    </li>
                    <li class="house-info-item">
                        <span class="type">装修：</span>
                        <span class="info">精装修</span>
                    </li>
                    <li class="house-info-item">
                        <span class="type">类型：</span>
                        <span class="info">普通住宅</span>
                    </li>

                    <li class="house-info-item">
                        <span class="type">小区：</span>
                        <a href="https://hengyang.anjuke.com/community/view/1174086" class="link" target="_blank" _soj="propview">维泰智慧城</a>
                        &nbsp;(<a href="https://hy.zu.anjuke.com/fangyuan/hengyangxian/" class="link" target="_blank" _soj="propview">衡阳县</a>
                        <a href="https://hy.zu.anjuke.com/fangyuan/hengyangxian-q-hycqhy/" class="link" target="_blank" _soj="propview">衡阳城区</a>)
                    </li>
                </ul><br/>
                <h3><div class="strongbox" style="font-weight: normal;" >房源概况</div></h3><br/>
                <div style="height: 30px">{{house.introduce}}</div><br/>
                <div>
                    <div class="strongbox" style="font-weight: normal;"><h3>
                        附近房源</h3></div>
                    <div  id="container" style="height: 400px;width: 100%"></div>
                </div>
                <div class="title" id="comment" style="margin-top: 20px">
                    <h3>评论 <small v-if="comments.length==0">抢沙发</small></h3>
                </div>
                <div id="respond">
                    <form action="" method="post" id="comment-form">
                        <div class="comment">
                            <div class="comment-title"><img class="avatar" :src="head" alt="" /></div>
                            <div class="comment-box">
                                <textarea placeholder="您的评论可以一针见血" name="comment" id="comment-textarea" cols="100%" rows="3" tabindex="1" v-model="content"></textarea>
                                <div class="comment-ctrl">
                                    <span class="emotion"><img src="images/face/5.png" width="20" height="20" alt="" />表情</span>
                                    <div class="comment-prompt">
                                        <i class="fa fa-spin fa-circle-o-notch"></i>
                                        <span class="comment-prompt-text"></span>
                                    </div>
                                    <input type="hidden" value="1" class="articleid" />
                                    <button type="button" name="comment-submit" tabindex="5" articleid="1" @click="addComment">评论</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div id="postcomments">
                    <ol class="commentlist" v-for="(item, index) in comments" v-if="comments && index<count">
                        <li class="comment-content"><span class="comment-f">#1</span>
                            <div class="comment-avatar"><img class="avatar" :src="item.image" alt="" /></div>
                            <div class="comment-main">
                                <p><span style="font-size: small">{{item.userName}}</span><br />
                                    {{item.content}}<br />
                                    <span style="font-size: small" class="time">{{dateFormat(item.createTime)}} · {{item.address}}</span>
                                </p>
                            </div>
                        </li>
                    </ol>
                    <p class="time" v-if="comments.length==0" style="text-align: center">该房源暂无评论......</p>
                    <p v-if="down" class="p2">
                        <a @click="load">加载更多</a>
                    </p>
                    <p v-if="loading" class="el-icon-loading" style="text-align: -webkit-center"></p>
                    <p v-if="noMore && comments.length!=0" class="p2">没有更多了</p>
                </div>
                <el-dialog
                        title="举报"
                        :visible.sync="dialogVisible"
                        width="30%"
                        center>
                      <span slot="footer" class="dialog-footer">
                          <el-button @click="open(0)" type="danger" plain round>匿名举报</el-button>
                          <el-button @click="open(1)" type="danger" round>实名举报</el-button>
                      </span>
                </el-dialog>

            </div>
        </div>
        <aside class="sidebar">
            <div >
                <div class="widget widget-tabs2">
                    <div class="myImg2">
                        <img @click="goPersonalHtml(master.id)" class="myImg" style="cursor: pointer" width="40px" height="40px" :src="master.image">
                        <div v-if="isIdentical == false" style="text-align: center;position:relative;top:-10px">
                            <span v-if="isConcern"><a @click="removeConcern"><i class="el-icon-success" style="font-size: 3em;color: darkorange;"></i></a></span>
                            <span  v-else><a @click="addConcern"><i class="el-icon-circle-plus" style="font-size: 3em; color: black"></i></a></span>
                        </div>
                        <h2 style="text-align: center" title="master.userName">房主：{{master.userName}}
                        </h2><br>
                        <h4><div style="text-align: center">联系电话：{{master.phone}}</div></h4>
                    </div>
                </div>
            </div>
            <div class="widget widget_hot" style="border: 0px">
                <p style="font-size: 18px; margin-bottom: 10px">热推房源</p>
                <ul>
                    <li style="border: 1px solid #eaeaea; margin-bottom: 20px;" v-for="i in houseList.slice(1,4)">
                        <a href="" @click.prevent="goHouseDetails(i.id, i.masterId)" style="width: 100%; height: 180px; display: inline;">
                            <div class="thumbnail" style="width: 100%; height: 180px">
                                <img class="thumb" :src="i.imgUrls[0]" alt="">
                            </div>
                            <div class="detail-info">
                                <p class="house-title">{{i.address}}</p>
                                <div class="house-type">{{i.scale}}  {{i.area}}平</div>
                                <div class="price">{{i.price}}元/月</div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </aside>
    </mymain>
</div>
<script>
    var v = new Vue({
        el: "#app",
        data:{
            state:1,
            user: {},
            master: {},
            house:{},
            houseList:[],
            nearbyHouseList:[],
            comments:{},
            content: "",
            id: localStorage.getItem("houseId"),
            userId: "",
            masterId: localStorage.getItem("masterId"),
            count: 3,
            down: true,
            loading: false,
            isCollect: false,
            isConcern: false,
            isIdentical: false,
            dialogVisible: false,
            head: "images/icon/favicon.png",
            report:{}
        },
        created(){
            this.onlogin();
        },
        methods:{
            onlogin(user){
                console.log(user);
                this.user = user;
                // sessionStorage.setItem("loginedUserId",user.id);
                setTimeout(()=>{
                    if (this.user != undefined){
                        this.userId = this.user.id;
                        this.head = this.user.image;
                        sessionStorage.setItem("loginedUserId",this.user.id);
                    }
                    this.query();
                },500)
            },
            query(){
                axios.get("house/details?houseId=" + this.id +"&userId=" + this.userId).then(res=>{
                    if (res.data.code){
                        console.log(res.data.data);
                        this.house=res.data.data.house;
                        if (this.user.id==this.house.masterId){
                            this.state=0;
                        }
                        this.isCollect = res.data.data.isCollect;
                        this.nearbyHouseList=this.house.nearbyHouseList;
                    }
                });
                axios.post("house/get").then(res=>{
                    this.houseList=res.data;
                });
                axios.post("/TN-USER/user/master?masterId="+this.masterId).then(res=>{
                    this.master = res.data;
                });
                axios.post("concern/selectConcern?userId=" + this.userId + "&masterId=" + this.masterId).then(res=>{
                    this.isConcern = res.data.isConcern;
                    this.isIdentical = res.data.isIdentical;
                })
                axios.post("/TN-EVALUATE/comment/selectComments?houseId=" + this.id).then(res=>{
                    this.comments = res.data;
                })
            },
            addConcern(){
                axios.post("concern/insertConcern?userId=" + this.user.id + "&masterId=" + this.masterId).then(res=>{
                    if (res.data.code == 1){
                        this.$message(res.data.msg);
                        this.isConcern = true;
                    } else {
                        this.$alert(res.data.msg);
                    }
                })
            },
            addComment(){
                let params = new URLSearchParams();
                params.append("houseId",this.id);
                params.append("content", this.content);
                params.append("userId",this.user.id);
                axios.post("/TN-EVALUATE/comment/insertComment", params).then(res=>{
                    if (res.data.code == 1){
                        this.$message(res.data.msg);
                        this.query();
                        this.content = "";
                    } else {
                        this.$alert(res.data.msg);
                    }
                })
            },
            removeConcern(){
                axios.post("concern/deleteConcern?userId=" + this.user.id + "&masterId=" + this.masterId).then(res=>{
                    if (res.data.code == 1){
                        this.$message(res.data.msg);
                        this.isConcern = false;
                    } else {
                        this.$alert(res.data.msg);
                    }
                })
            },
            addCollect(){
                let params = new URLSearchParams();
                params.append("houseId",this.id);
                params.append("userId", this.userId);
                axios.post("collect/insertCollect", params).then(res=>{
                    if (res.data.code == 1){
                        this.$message(res.data.msg);
                        this.isCollect = true;
                    } else {
                        this.$alert(res.data.msg);
                    }
                })
            },
            removeCollect(){
                let params = new URLSearchParams();
                params.append("houseId",this.house.id);
                params.append("userId", this.userId);
                axios.post("collect/deleteCollect", params).then(res=>{
                    if (res.data.code == 1){
                        this.$message(res.data.msg);
                        this.isCollect = false;
                    } else {
                        this.$alert(res.data.msg);
                    }
                })
            },
            open(anonymous) {
                var name;
                if (anonymous==1){
                    name='实名举报';
                }else
                    name='匿名举报';

                this.$prompt('请输入举报内容', name, {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^.{10,50}$/,
                    inputErrorMessage: '举报内容请在10-50个字之间'
                }).then(({ value }) => {
                    this.report.userId=this.house.masterId;
                    this.report.houseId=this.house.id;
                    //举报人id
                    his.report.reporterId=this.user.id;
                    this.report.anonymous=anonymous;
                    this.report.content=value;
                    axios.post("/TN-USER/user/report",this.report).then(res=>{
                        this.$message(res.data.msg);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消举报'
                    });
                });
            },
            load(){
                this.down = false;
                this.loading = true;
                setTimeout(()=>{
                    this.count += 2;
                    this.loading = false
                    this.down = true;
                },1000);
            },
            goHouseDetails(houseId, masterId){
                localStorage.setItem("houseId",houseId);
                localStorage.setItem("masterId",masterId);
                location.href = "houseDetails.html";
            },
            goPersonalHtml(userId){
                localStorage.setItem("userId", userId);
                location.href = "personalPage.html";
            },
            // 格式化日期为 yyyy-MM-dd HH:mm:ss
            dateFormat(time) {
                var date=new Date(time);
                var year=date.getFullYear();
                /* 在日期格式中，月份是从0开始的，因此要加0
                 * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
                 * */
                var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
                var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
                var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
                var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
                var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
                // 拼接
                return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
            },
        },
        watch:{
            nearbyHouseList(){
                this.$nextTick(()=>{
                    var map = new BMapGL.Map("container");          // 创建地图实例
                    // var point = new BMapGL.Point(sessionStorage.getItem("lng"),sessionStorage.getItem("lat"));  // 创建点坐标
                    var point = new BMapGL.Point(parseFloat(this.house.lng),parseFloat(this.house.lat));  // 创建点坐标
                    map.centerAndZoom(point, 13);                 // 初始化地图，设置中心点坐标和地图级别
                    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
                    var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
                    map.addControl(scaleCtrl);
                    var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
                    map.addControl(cityCtrl);
                    var circle = new BMapGL.Circle(point,7000,{fillColor:"green", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
                    map.addOverlay(circle);
                    var houses=this.nearbyHouseList;
                    for (var i=0;i<houses.length;i++){
                        // 创建点标记
                        var point = new BMapGL.Point(parseFloat(houses[i].lng),parseFloat(houses[i].lat));
                        var marker = new BMapGL.Marker(point);
                        map.addOverlay(marker);
                        // 创建信息窗口
                        var opts = {
                            width: 200,
                            height: 100,
                            title: houses[i].introduce
                        };
                        // var infoWindow = new BMapGL.InfoWindow('地址：'+houses[i].province+houses[i].city+houses[i].region+houses[i].address, opts);
                        var content = '地址：'+houses[i].province+houses[i].city+houses[i].region+houses[i].address;
                        // 点标记添加点击事件
                        addClickHandler(content,marker,point,opts);
                    }
                    function addClickHandler(content,marker,p,opts){
                        marker.addEventListener('click', function () {
                            var infoWindow = new BMapGL.InfoWindow(content, opts);  // 创建信息窗口对象
                            map.openInfoWindow(infoWindow, p); //开启信息窗口
                        });
                    }
                })
            }
        },
        computed:{
            noMore(){
                if (this.count >= this.comments.length){
                    this.down = false;
                }
                return this.count >= this.comments.length;
            }
        },
    });
</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.ias.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>